import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'order_submit_logic.dart';

class OrderSubmitPage extends StatelessWidget {
  const OrderSubmitPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<OrderSubmitLogic>();

    return SafeArea(
        child: Scaffold(
      body: SingleChildScrollView(
        child: Stack(
          children: [
            SizedBox(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
            ),
            Positioned(top: 0, child: Image.asset("assets/images/Maskbg.png")),
            Positioned(
                top: 190,
                bottom: 0,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height - 190,
                  decoration: const BoxDecoration(
                      color: Color(0xFFF7F8FA),
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(15),
                          topRight: Radius.circular(15))),
                )),
            Positioned(
                top: 150,
                left: 10,
                right: 10,
                child: Stack(
                  children: [
                    Image.asset(
                      'assets/images/Rectangle.png',
                      height: 42,
                    ),
                    Positioned(
                        left: 0,
                        right: 0,
                        child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: 15),
                          height: 42,
                          alignment: Alignment.center,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: const [
                                  Text(
                                    '51190',
                                    style: TextStyle(
                                        color: Color(0xffFF4D4D),
                                        fontSize: 15,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  SizedBox(
                                    width: 3.5,
                                  ),
                                  Text(
                                    '人已经参与抢购',
                                    style: TextStyle(
                                      color: Color(0xff896222),
                                      fontSize: 15,
                                    ),
                                  ),
                                ],
                              ),
                              const Text(
                                'a**3刚刚下单',
                                style: TextStyle(
                                  color: Color(0xff896222),
                                  fontSize: 15,
                                ),
                              )
                            ],
                          ),
                        )),
                  ],
                )),
            Positioned(
                top: 150 + 42,
                left: 10,
                right: 10,
                child: Container(
                  decoration: const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(7.5),
                          bottomRight: Radius.circular(7.5))),
                  alignment: Alignment.center,
                  height: 60,
                  child: TabBar(
                    controller: logic.tabController,
                    tabs: logic.titles.map((e) => Text(e)).toList(),
                    labelStyle: const TextStyle(
                        fontSize: 18, fontWeight: FontWeight.bold),
                    labelColor: Colors.black,
                    isScrollable: true,
                    indicator: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage('assets/images/Vector.png'))
                        // gradient:
                        //LinearGradient(colors: [DColor.primary, Color(0xffFFB6A5)]),
                        ),
                    indicatorSize: TabBarIndicatorSize.tab,
                    unselectedLabelColor: const Color(0xFF333333),
                    labelPadding: const EdgeInsets.only(
                        left: 13, right: 13, top: 5, bottom: 10),
                    indicatorPadding:
                        const EdgeInsets.only(left: 15, right: 15, top: 35),
                    unselectedLabelStyle: const TextStyle(fontSize: 14),
                  ),
                )),
            Positioned(
                top: 150 + 42 + 60,
                bottom: 20,
                left: 0,
                right: 0,
                child: SizedBox(
                    child: TabBarView(
                  controller: logic.tabController,
                  children: [
                    Container(
                      padding:
                          const EdgeInsets.only(top: 6, left: 10, right: 10),
                      child: ListView(
                        children: [
                          item(context),
                          item(context),
                          item(context),
                          item(context),
                          item(context),
                          item(context),
                          item(context),
                        ],
                      ),
                      // color: Colors.red,
                    ),
                    Container(),
                    Container(),
                    Container(),
                    Container(),
                    Container(),
                  ],
                )))
          ],
        ),
      ),
    ));
  }

  Widget item(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 10),
      width: MediaQuery.of(context).size.width - 20,
      padding: const EdgeInsets.all(10),
      height: 136,
      decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(7.5))),
      child: Row(
        children: [
          Image.asset(
            'assets/images/icon_me_pm_logo.png',
            width: 115,
          ),
          const SizedBox(
            width: 10,
          ),
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                '法国进口品牌女生时尚经典款增亮唇色提升光泽低饱和度少...',
                style: TextStyle(color: Color(0xff000000), fontSize: 14),
              ),
              const SizedBox(
                height: 5.5,
              ),
              const Text(
                '爆抢3000件',
                style: TextStyle(color: Color(0xff999999), fontSize: 10),
              ),
              const SizedBox(
                height: 16.5,
              ),
              Stack(
                children: [
                  Image.asset(
                    'assets/images/GroupBtn.png',
                    width: 195,
                  ),
                  Positioned(
                      top: 0,
                      bottom: 0,
                      left: 0,
                      child: Container(
                        width: 195 / 2,
                        alignment: Alignment.center,
                        child: const Text(
                          '¥579.99',
                          style:
                              TextStyle(color: Color(0xffFFFBFB), fontSize: 16),
                        ),
                      )),
                  Positioned(
                      top: 0,
                      bottom: 0,
                      right: 0,
                      child: Container(
                        width: 195 / 2,
                        alignment: Alignment.center,
                        child: const Text(
                          '赠503.99酒贝',
                          style:
                              TextStyle(color: Color(0xffC21C3F), fontSize: 11),
                        ),
                      ))
                ],
              )
            ],
          ))
        ],
      ),
    );
  }
}
